<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://51star.com/mytag/tag" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试日历</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-admin/easyui.css"> 

</head>
<body>
<style type="text/css">
	.ttime{
		width:6px;
		height:6px;
		background:red;
		border-radius:3px;
		display:block;
		margin:auto;
	}
.calendar table td, .calendar table th {
    font-size: 15px;
    border-radius:16px;
}
.calendar-selected {
    border:none;
}
.calendtext{
	width: 60%; 
	height: 100%; 
	border: solid 1px; 
	display: inline-block;
}
.calenddegree{
	width: 20%; 
	height: 100%;
	border: solid 1px;
	display: inline-block;
	float: right;
}
.calendlist{
	width:100%;
	height:30px;
	margin:10px auto;
	border:solid 1px red;
}
.radiocolorone{
	background:#ED5565;
	border-radius:2px;
}
.radiocolortwo{
	background:#ED5565;
	border-radius:2px;
}
.radiocolorthree{
	background:#ED5565;
	border-radius:2px;
}
</style>
<script type="text/javascript">
		$(function(){
			addcalend();
			vaa();
			
			$(".calendar-nav").click(function(){
				setTimeout(function(){
					vaa(); 
				}, 10);
			});
		})
		function vaa(){
				var a=$(".calendar-text").html();
				
				$.ajax({
					url:'calendaryf',
					type:"post",
					data:{"imouthyear":a},
					success:function(data){
						//获取所有的日期进行遍历
							$(".calendar-day").each(function(){
								var h="";//获取某日期的提醒，如果有多个，则进行追加，并换行显示
								for(var z=0;z<data.length;z++){
									//当日历控件中的日期与数据库中的日期匹配时，则在该日期旁添加相应的提醒
									if($(this).attr("abbr")==data[z]["itime"]){
										h+=data[z]["iremind"]+"\n";
										$(this).attr({"title":h})
									} 
									
								}
								if($(this).attr("title")!=null){
									$(this).append("<a class='ttime'></a>");
								}
							});
							
					} 
				});
				
				
		}
		//今日
		function addcalend(){
			var calendar=$(".calendar-today").attr("abbr");
			console.log(calendar);
			$.ajax({
				url:"selecttoday",
				type:"post",
				data:{"a":calendar},
				success:function(data){
					var zz=$(".list-calendar");
					zz.empty();
					var z3=$("<div style='width:100%;height:40px;margin:10px auto;'></div>");
					for(var i=0;i<data.length;i++){
						var z1=$("<span style='width: 60%; height: 90%; display: inline-block;font-size:15px;overflow:hidden;'>"+data[i]["iremind"]+"</span>");
						if(data[i]["idegree"]=='高'){
							var z2=$("<a style='width: 20%; height: 78%;display: inline-block;border-radius:5px;float: right;text-align:center;line-height:30px;color:white;font-size:15px;background:#ED5565;'>"+data[i]["idegree"]+"</a>");
						}else if(data[i]["idegree"]=='中'){
						var z2=$("<a style='width: 20%; height: 78%;display: inline-block;border-radius:5px;float: right;text-align:center;line-height:30px;color:white;font-size:15px;background:#F8AC59;'>"+data[i]["idegree"]+"</a>");
						}else if(data[i]["idegree"]=='低'){
							var z2=$("<a style='width: 20%; height: 78%;display: inline-block;border-radius:5px;float: right;text-align:center;line-height:30px;color:white;font-size:15px;background:#4FB7F3;'>"+data[i]["idegree"]+"</a>");
						}
						z3.append(z1);
						z3.append(z2);
					}
					zz.append(z3);
					
				}
			});
		}
	</script>
<div style="width:90%;height:100%;background:white;padding:20px;margin:20px auto;">
<div style="float:left;width:700px;height:500px;">
	<div id="ct8_htmlContent" style="width: 100%;text-align:left;height: 92px;overflow:hidden;">
		<iframe name="weather_inc" width="1110px" height="70" 
		src="http://i.tianqi.com/index.php?c=code&amp;id=2&amp;num=5" 
		frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
		</iframe>
	</div>
	<div style="width:682px;height:92px;border:solid 1px;margin-top:20px;margin-bottom:20px;">
		<span>Decade公司欢迎您</span>
		<img alt="暂无图片展示" src="" style="width:100%;height:92px;display:inline-block;">
	</div>
	<div>
		<div style="float:left;width:300px;height:288px;border:solid 1px;">
			<div style="color:#808080;margin-left: 113px;font-size: 16px;font-weight: 700;">消息通知</div>
			<c:forEach items="${nots}" var="i">
				<div style="margin-top:5px;margin-left: 5px;">
					<div class="divss">
						<span>培训名称：</span><span>${i.course_name }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>	
						<span>培训讲师：</span><span>${i.staff_names }</span>			
					</div>
					<div class="divss">
						<span>培训地点：</span><span>${i.activity_address }</span>				
					</div>
					<div class="divss">
						<span>开始时间：</span><span>${i.activity_start_time }</span>
					</div>
					<div class="divss">
						<span>结束时间：</span><span>${i.activity_end_time }</span>
					</div>
				</div>
			</c:forEach>
		</div>
		<div id="tjt" style="float:left;width:360px;height:288px;border:solid 1px;margin-left:20px;">2</div>
	</div>
</div>
<div style="float:left;">
<div id="cc" class="easyui-calendar" style="width:318px;height:262px;border-radius:4px;"></div>
<div style="width:316px;height:253px;border:solid 1px lightgray;margin-top:2px;border-radius:4px;">

	<p>
		<span style="margin-left:20px;font-size:15px;color:gray;">今日提醒</span>
		<a class="add-calend" style="cursor:pointer;float:right;margin-right:30px;margin-top:-10px;font-size:26px;color:lightgray;">+</a>
	</p>
	<div class="list-calendar" style="width:90%;height:220px;margin:10px auto;overflow:auto;">
		<%-- <c:forEach items="${manylist}" var="ll">
			<div style="width:100%;height:30px;margin:10px auto;">
				<span style="width: 60%; height: 100%; display: inline-block;font-size:15px;overflow:hidden;">${ll.iremind}</span>
				<a style="width: 20%; height: 100%;display: inline-block;border-radius:5px;
				float: right;text-align:center;line-height:30px;color:white;font-size:15px;
				${ll.idegree=='高'?'background:#ED5565':''}${ll.idegree=='中'?'background:#F8AC59':''}${ll.idegree=='低'?'background:#4FB7F3':''}">${ll.idegree}</a>
			</div>
		</c:forEach> --%>
		
	</div>
</div>
</div>
</div>

<!-- 弹窗 -->
<script type="text/javascript">
	$(function(){
		
		$("#mainzhe").hide();
		
		$(".add-calend").click(function(){
			$("#mainzhe").show();
		});
		$("#calend-off").click(function(){
			$("#mainzhe").hide();
		});
		$("#calend-on").click(function(){
			var content=$("#calend-content").val();
			var date=$("#calend-date").val();
			var degree=$('input[name="chdu"]:checked').val();
			console.log("文本："+content+"---日期："+date+"---程度："+degree);
			$.ajax({
				url:"savecalendar",
				type:"post",
				data:{"a":content,"b":date,"c":degree},
				success:function(data){
					$("#mainzhe").hide();
					 addcalend();
					var zz=$(".list-calendar");
					zz.empty();
					var z3=$("<div style='width:100%;height:40px;margin:10px auto;'></div>");
					for(var i=0;i<data.length;i++){
						var z1=$("<span style='width: 60%; height: 90%; display: inline-block;font-size:15px;overflow:hidden;'>"+data[i]["iremind"]+"</span>");
						if(data[i]["idegree"]=='高'){
							var z2=$("<a style='width: 20%; height: 78%;display: inline-block;border-radius:5px;float: right;text-align:center;line-height:30px;color:white;font-size:15px;background:#ED5565;'>"+data[i]["idegree"]+"</a>");
						}else if(data[i]["idegree"]=='中'){
						var z2=$("<a style='width: 20%; height: 78%;display: inline-block;border-radius:5px;float: right;text-align:center;line-height:30px;color:white;font-size:15px;background:#F8AC59;'>"+data[i]["idegree"]+"</a>");
						}else if(data[i]["idegree"]=='低'){
							var z2=$("<a style='width: 20%; height: 78%;display: inline-block;border-radius:5px;float: right;text-align:center;line-height:30px;color:white;font-size:15px;background:#4FB7F3;'>"+data[i]["idegree"]+"</a>");
						}
						z3.append(z1);
						z3.append(z2);
					}
					zz.append(z3);
				}
			});
		});
		tongji("tjt");
		$(".guanbiya").click(function(){
			$("#mainzhe").hide();
		});
	})
	
</script>
<!-- 遮罩层+新增提醒 -->
<div id="mainzhe" style="width:1366px;height:736px;position:fixed; top:0px;
background: rgba(0, 0, 0, 0.5);text-align:center;left:0;z-index:10;display:none;" >

<div style="margin:20px auto;width:500px;height:220px;background:white;border-radius:3px;">
	<div style="width:100%;height:30px;">
		<span style="width:fit-content;height:30px;line-height:30px;display:inline-block;float:left;margin-left:20px;" class="xinzeng_text">新增提醒</span>
		<button class="icon-close guanbiya" style="float:right;width:30px;height:30px;cursor:pointer;border:none;outline:none;"></button>
	</div>
	<div style="width:100%;height:145px;border-top:solid 1px #E5E5E5;border-bottom:solid 1px #E5E5E5;">
		<p>
			<span style="float:left;margin-left:125px;">提醒内容：</span><textarea rows="" cols="" id="calend-content" style="display:block;resize:none;"></textarea>
		</p>
		<p>
			<span style="float:left;margin-left:125px;">提醒日期：</span><input type="date" id="calend-date" style="display:block;"/>
		</p>
		<p>
			<span>重要性：</span>
			<input type="radio" name="chdu" style="margin-left:10px;margin-right:10px;background:red;"value="高"/>高
			<input type="radio" name="chdu" style="margin-left:10px;margin-right:10px;"value="中"/>中
			<input type="radio" name="chdu" style="margin-left:10px;margin-right:10px;"value="低"/>低
		</p>
	</div>
	<div style="width:100%;height:30px;">
		<div style="width:140px;float:right;margin-top:5px;">
			<a id="calend-off" href="#" class="easyui-linkbutton" data-options="width:60,height:25">关闭</a>
			<a id="calend-on" href="#" class="easyui-linkbutton" data-options="width:60,height:25">确定</a>
		</div>
	</div>
</div>

</div>
<script type="text/javascript" src="static/easyui/echarts.js"></script>
<script type="text/javascript">
function ajaxLoading(text) {
    $("<div class=\"datagrid-mask\"></div>").css({
        display: "block",
        width:  $("#"+text).offsetWidth,
        height: $("#"+text).offsetHeight,
    }).appendTo("#"+text);
    $("<div class=\"datagrid-mask-msg\"></div>").html("正在加载数据，请稍候。。。").appendTo("#"+text).css({
        display: "block",
        left: ($(document.body).outerWidth(true) - 190) / 2,
        top: ($(window).height() - 45) / 2
    });
}

function ajaxLoadEnd() {
    $(".datagrid-mask").remove();
    $(".datagrid-mask-msg").remove();
}
function tongji(text){
	$.ajax({
		url:"kaoqing-tongji",
		type:"post",
		beforeSend:function () {
            ajaxLoading(text);
            },
		success:function(a){
			var myChart = echarts.init(document.getElementById(text));
			var option = {
				    legend: {},
				    tooltip: {},
				    dataset: {
				        dimensions: ['product', '上班', '迟到', '早退', '旷工'],
				        source: a
				    },
				    xAxis: {type: 'category'},
				    yAxis: {},
				    // Declare several bar series, each will be mapped
				    // to a column of dataset.source by default.
				    series: [
				        {type: 'bar',
				        	  color: function(params) {
			                      // build a color map as your need.
			                      return '#37A2DA'
			                  }
				        },
				        {type: 'bar',
				        	color: function(params) {
			                    // build a color map as your need.
			                    return '#67E0E3'
			                }
				        },
				        {type: 'bar',
				        	color: function(params) {
			                    // build a color map as your need.
			                    return '#FF2825'
			                }
				        },
				        {type: 'bar',
				        	color: function(params) {
				                      // build a color map as your need.
				                    return '#FFDB5C'
				                  }		
				        }
				    ]
				};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
			ajaxLoadEnd();
		}
	});
}
/*
 * [
	    {product: '第一周', '上班': 3, '迟到': 4, '旷工': 5},
	    {product: '第二周', '上班': 8, '迟到': 7, '旷工': 6},
	    {product: '第三周', '上班': 6, '迟到': 5, '旷工': 4},
	    {product: '第四周', '上班': 7, '迟到': 9, '旷工': 5}
	];
 */
</script>
</body>
</html>